<template>
  <el-dialog
    :visible="addDialog"
    width="50%"
    :show-close="false"
    @close="handleClose"
  >
  <div slot="title">
    <div class="title_">添加常用功能</div>
    <div class="hint">您可以根据自己的使用习惯自定义常用功能，最多只可添加5个</div>
  </div>
  <div v-for="(item, i) of menuList" :key="i">
                <el-checkbox v-if="item.children.length" :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change="handleCheckAllChange2($event,i)">{{item.name}}</el-checkbox>
                <el-checkbox-group v-model="item.checkedCities" @change="handleCheckedCitiesChange2($event,i)">
                    <div v-if="item.children.length"  style="margin-left: 24px">
                        <el-checkbox v-for="child in item.children" :label="child.id" :key="child.id">{{child.name}}</el-checkbox>
                    </div>
                    <el-checkbox v-else :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
                </el-checkbox-group>
            </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose" class="width120">取消</el-button>
      <el-button type="primary" class="width120" @click="handleSubmit"
        >完成</el-button
      >
    </div>
  </el-dialog>
</template>
  
  <script>
export default {
  props: ["addDialog", "list"],
  data() {
    return {
      menuList: []
    };
  },
  created() {
    const arr = this.$store.state.merchantMenu
    this.menuList = arr.map(item => ({
        ...item,
        isIndeterminate: true,
        checkAll: false,
        checkedCities: [],
    })).filter(val => val.name !== '工作台')
    // 回显
    if (this.list.length) {
        const arr = this.list.map(item => item.menuId)
        this.menuList.forEach(val => {
            if (arr.includes(val.id)) {
                val.checkedCities.push(val.id)
            }
            if (val.children.length) {
                val.children.forEach(vv => {
                    if (arr.includes(vv.id)) {
                        val.checkedCities.push(vv.id)
                    }
                })
            }
        })
    }
  },
  methods: {
    handleCheckAllChange2(val, i) {
        this.menuList[i].checkedCities = val ? this.menuList[i].children.map(v => v.id) : [];
        this.menuList[i].isIndeterminate = false;
      },
      handleCheckedCitiesChange2(value, i) {
        let checkedCount = value.length;
        this.menuList[i].checkAll = checkedCount === this.menuList[i].children.length;
        this.menuList[i].isIndeterminate = checkedCount > 0 && checkedCount < this.menuList[i].children.length;
      },
    handleClose() {
      this.$emit("update:addDialog", false);
    },
    handleSubmit() {
      let menuIds = []
      this.menuList.forEach(item => {
        if (item.checkedCities.length) {
            menuIds.push(...item.checkedCities)
        }
      })
      if (menuIds.length > 5) {
        this.$message.warning('常用功能最多只可添加5个')
      } else {
        // 回显编辑
        this.$http.post('/api/workBench/oftenAdd', {
            menuIds
        }).then(res => {
            if (res.code === '0000') {
                this.$message.success('添加成功！')
                this.$emit("update:addDialog", false);
                this.$emit('updateList')
            }
        })
      }
    },
  },
};
</script>
  
  <style lang="scss" scoped>
  .title_ {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }
.hint {
    color: #BFBFBF;
    font-size: 12px;
}
.width80 {
    width: 80px;
}
:deep(.el-checkbox) {
            margin-bottom: 10px;
        }
        :deep(.el-dialog) {
            border-radius: 20px;
            .el-dialog__header {
                padding-left: 40px;
            }
            .el-dialog__body {
                padding: 20px 40px;
            }
            .el-dialog__footer {
                text-align: center;
            }
        }
</style>